<template>
    <div class="topNav">
        <!-- 列表文字图标 -->
        <div>
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-24gf-playlistMusic"></use>
            </svg>
        </div>
        <!-- 文本部分内容 -->
        <div class="content">
            <ul>
                <li @click="$router.push('/infoUser')">我的</li>
                <li>发现</li>
                <li>云村</li>
                <li @click="$router.push('/allvideolist')" >视频</li>
            </ul>
        </div>
        <!-- 搜索 -->
        <div>
            <svg class="icon" aria-hidden="true" @click="$router.push('/search')">
                <use xlink:href="#icon-sousuo"></use>
            </svg>
        </div>
    </div>
</template>

<style lang = "less" scoped>

.topNav{
    display: flex;
    width: 100%;
    padding: 2vw;
    justify-content: space-between;

    .icon{
        width: 8vw;
    }
    .content{
        width: 70%;
        display: flex;
    }

    .content ul{
        display: flex;
        list-style: none;
        width: 100%;
        justify-content: space-between;
        align-items: center;
    }

    .content ul li{
        width: 24%;
        text-align: center;
        font-size: 6vw;
        font-family: "华文行楷";
        color: #666;
    }

    .content ul li:hover{
        color: rgb(4, 16, 12);
        border-radius: 2px;
        border-bottom:4px solid green;
        border-image:linear-gradient(to right,rgba(249, 33, 33, 0.1),rgba(20, 132, 117, 0.5),rgba(230, 26, 39, 0.1));
    }

}
</style>

<script setup>



</script>